<template>
    <div class="w-full" :class="slide ? 'slide-out' : 'slide-in'">
        <n-grid cols="1 600:2 ">
            <n-gi>
                <n-list hoverable>
                    <n-list-item>
                        <n-thing
                            title="名称"
                            :title-extra="room.name"
                        ></n-thing>
                    </n-list-item>
                    <n-list-item>
                        <n-thing
                            title="面积"
                            :title-extra="`${room.area}平米`"
                        ></n-thing>
                    </n-list-item>
                    <n-list-item>
                        <n-thing
                            title="容量"
                            :title-extra="`${room.capacity}人`"
                        ></n-thing>
                    </n-list-item>
                    <n-list-item>
                        <n-thing
                            title="每小时租金"
                            :title-extra="`${room.hourlyRate}元`"
                        ></n-thing>
                    </n-list-item>
                </n-list>
            </n-gi>
            <n-gi>
                <n-list hoverable>
                    <n-list-item>
                        <n-thing title="设备">
                            <template #header-extra>
                                <div class="flex gap-5px">
                                    <n-tag
                                        size="small"
                                        :type="
                                            room.device.speaker
                                                ? 'primary'
                                                : 'error'
                                        "
                                    >
                                        <template #icon>
                                            <n-icon :component="Mic" />
                                        </template>
                                        麦克风
                                    </n-tag>
                                    <n-tag
                                        size="small"
                                        :type="
                                            room.device.projector
                                                ? 'primary'
                                                : 'error'
                                        "
                                    >
                                        <template #icon>
                                            <n-icon :component="Tv" />
                                        </template>
                                        投影仪
                                    </n-tag>
                                    <n-tag
                                        size="small"
                                        :type="
                                            room.device.internet
                                                ? 'primary'
                                                : 'error'
                                        "
                                    >
                                        <template #icon>
                                            <n-icon :component="Cellular" />
                                        </template>
                                        互联网
                                    </n-tag>
                                </div>
                            </template>
                        </n-thing>
                    </n-list-item>
                    <n-list-item>
                        <n-thing title="类型">
                            <template #header-extra>
                                <n-tag size="small">
                                    {{
                                        room.type === "classroom"
                                            ? "教室型"
                                            : "圆桌型"
                                    }}
                                </n-tag>
                            </template>
                        </n-thing>
                    </n-list-item>
                    <n-list-item>
                        <n-thing title="状态">
                            <template #header-extra>
                                <n-tag
                                    size="small"
                                    :type="
                                        room.maintained ? 'error' : 'primary'
                                    "
                                >
                                    {{ room.maintained ? "维修中" : "正常" }}
                                </n-tag>
                            </template>
                        </n-thing>
                    </n-list-item>
                    <n-list-item>
                        <n-thing
                            title="创建日期"
                            :title-extra="
                                new Date(room.createdDate).toLocaleDateString()
                            "
                        ></n-thing>
                    </n-list-item>
                </n-list>
            </n-gi>
        </n-grid>
    </div>
</template>

<script lang="ts" setup>
import { ref, watch } from "vue";
import { Mic, Cellular, Tv } from "@vicons/ionicons5";

import type { MeetingRoom } from "@/service/api/types/room";

const props = defineProps<{
    room: MeetingRoom;
}>();

const slide = ref(false);

watch(
    () => props.room,
    () => {
        slide.value = true;
        setTimeout(() => {
            slide.value = false;
        }, 300);
    }
);
</script>

<style scoped>
/* 定义滑出动画关键帧 */
@keyframes slideOut {
    from {
        transform: translateX(0);
        opacity: 1;
    }

    to {
        transform: translateX(-100%);
        opacity: 0;
    }
}

/* 定义滑入动画关键帧 */
@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* 定义滑出动画类 */
.slide-out {
    animation: slideOut 0.3s ease; /* 使用滑出动画 */
}

/* 定义滑入动画类 */
.slide-in {
    animation: slideIn 0.3s ease; /* 使用滑入动画 */
}
</style>
